$(function() {
	$('.main a').hide();
	$('.main span').on('click', function () {
		$('.main a').show();
	});

	$('.top').on('click', function() {
		if ($(this).attr('v')==1){
			$(this).text('X'); $(this).attr('v','0');
			$('.left').show();
			return;
		}
		$(this).text('⬅️'); 
		$(this).attr('v','1');
		$('.left').hide();
	});

	$.getJSON('../js/link.json', function(json, textStatus) {
		linkdata.jsondata = json;
		linkdata.setUrlToMain('js_html');
		linkdata.initTop();
	});
});

var linkdata = {
	jsondata : {},
	setUrlToMain: function (topflag) {
		var html = '';
		html += "<span class='list-group-item active' style='text-align:center'>"+this.jsondata[topflag].name+"</span>";
		this.jsondata[topflag].url.forEach(function(x){
			if (x.length == 1) {
				var urldetail = x[0].split(' ');
				html += "<a target='_blank' href='"+ urldetail[1] +"' class='list-group-item'>"+(urldetail[2]==''?urldetail[1]:urldetail[2])+"</a>";
			}else if (x.length >= 2) {
				x.forEach(function(o){
					var urldetail = o.split(' ');
					if (urldetail[0]=='-') {
						html += "<a target='_blank' onclick='var chcss = $(this).children(\"div\"); if(chcss.css(\"display\")==\"none\"){chcss.css(\"display\",\"block\"); return;} chcss.css(\"display\",\"none\")' class='list-group-item'>"+
								"<span onclick='window.open(\""+urldetail[1]+"\")'>"+(urldetail[2]==''?urldetail[1]:urldetail[2])+"~></span>"+
								"<div style='display:none'><hr>";
					}else{
						html += "<div style='margin-left:50px;' onclick='window.open(\""+ urldetail[1] +"\")' onmouseover='$(this).css(\"background-color\", \"white\")' onmouseout='$(this).css(\"background-color\", \"\")'>"+
									(urldetail[2]==''?urldetail[1]:urldetail[2])+
								"</div>";
					}
				});
				html += "</div></a>";
			}
		});
		$('.main').html(html);
	},
	initTop: function(){
		var html = '';
		for(r in this.jsondata){
			html = "<a class='list-group-item' onclick='linkdata.setUrlToMain(\""+r+"\")'>"+ this.jsondata[r].name +"</a>" + html;
		}
		$('.left div').html(html);
	}
}
